<template>
  <div>
    <div class="title-box">
      <div class="title-icon"></div>
      <p class="title-name">{{ props.titleName }}</p>
      <slot></slot>
    </div>
    <div class="bottom-line">
      <div class="left-line"></div>
      <div class="right-line"></div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
const props = defineProps({
  titleName: {
    type: String,
    default: "",
  },
});
</script>
<style scoped lang="scss">
.title-box {
  height: pxTvh(28);
  width: 100%;
  background: linear-gradient(270deg, rgba(34, 48, 84, 0) 0%, #314576 100%);
  display: flex;
  align-items: center;
  & > .title-icon {
    width: pxTvw(4);
    height: pxTvh(13);
    background: #3174ff;
    margin-left: pxTvw(9);
  }
  & > .title-name {
    @include computed_font(14);
    font-family: PingFang SC, PingFang SC,sans-serif;
    font-weight: 500;
    color: #dceaff;
    margin-left: pxTvw(7);
  }
}
.bottom-line {
  height: pxTvw(1);
  display: flex;
  & > .left-line {
    height: 100%;
    background: rgba(106, 145, 227, 0.3);
    width: 98%;
  }
  & > .right-line {
    height: 100%;
    background: #3174ff;
    width: 2%;
  }
}
</style>